<template>
  <div>
    <div>
      <h2 class="tile">&nbsp;&nbsp;&nbsp;担保物管理</h2>
    </div>
    <div style="margin-left: 120px">
      <el-form :inline="true" :model="queryparams" class="demo-form-inline">
        <el-form-item label="担保物编号">
          <el-input
            v-model="queryparams.collateral_num"
            placeholder="担保物编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-select v-model="queryparams.collateral_type" placeholder="类别">
            <el-option
              v-for="(item, i) in collateralTypes"
              :key="i"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="searchCollateral">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    

    <div class="margin">
      <el-table :data="pageBean.beanList" style="width: 100%" height="400">
        <el-table-column prop="id" label="序号" width="100"></el-table-column>
        <el-table-column
          prop="collateral_num"
          label="担保物编号"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="collateral_name"
          label="担保物名称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="collateral_type"
          label="担保物类别"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="approval_status"
          label="审批状态"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="update_time"
          label="更新时间"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="valuation_value"
          label="评估价值"
          width="120"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleLook(scope.$index, scope.row)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="担保物详情" :visible.sync="dialogFormVisible">
        <el-descriptions
          class="margin-top"
          title="担保物详情"
          :column="3"
          :size="size"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              序号
            </template>
            {{ collateralForm.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              担保物编号
            </template>
            {{ collateralForm.collateral_num }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              担保物名称
            </template>
            {{ collateralForm.collateral_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              担保物类别
            </template>
            {{ collateralForm.collateral_type }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              审批状态
            </template>
            {{ collateralForm.approval_status }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              更新时间
            </template>
            {{ collateralForm.update_time }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              评估价值
            </template>
            {{ collateralForm.valuation_value }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              企业名称
            </template>
            <el-tag size="small">{{ collateralForm.business_name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              信用代码
            </template>
            <el-tag size="small">{{ collateralForm.credit_code }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              注册资本
            </template>
            <el-tag size="small">{{
              collateralForm.registered_capital
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              法人代表
            </template>
            <el-tag size="small">{{ collateralForm.legal_person }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              身份证
            </template>
            <el-tag size="small">{{ collateralForm.idcard }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              电话号码
            </template>
            <el-tag size="small">{{ collateralForm.telephone }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div style="margin-left: 120px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageBean.pageIndex"
        :page-sizes="[5, 6, 7, 8]"
        :page-size="pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: "",
      pageBean: {
        beanList: [],
        pageIndex: 0,
        pageSize: 0,
        totalRecord: 0,
        totalpage: 0,
      },
      queryparams: {
        collateral_num: "",
        collateral_type: "",
      },
      collateralTypes: [],
      pageIndex: 1,
      pageSize: 5,
      dialogFormVisible: false,
      collateralForm: {
        id: "",
        collateral_num: "",
        collateral_name: "",
        collateral_type: "",
        approval_status: "",
        update_time: "",
        valuation_value: "",
        business_name: "",
        credit_code: "",
        registered_capital: "",
        legal_person: "",
        idcard: "",
        telephone: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getCollateral();
    this.getTypes();
  },
  methods: {
    searchCollateral() {
      this.getCollateral();
    },
    handleLook(index, row) {
      this.dialogFormVisible = true;
      (this.collateralForm.id = row.id),
        (this.collateralForm.collateral_num = row.collateral_num),
        (this.collateralForm.collateral_name = row.collateral_name),
        (this.collateralForm.collateral_type = row.collateral_type),
        (this.collateralForm.approval_status = row.approval_status),
        (this.collateralForm.update_time = row.update_time),
        (this.collateralForm.valuation_value = row.valuation_value),
        (this.collateralForm.business_name = row.businessInfo.business_name),
        (this.collateralForm.credit_code = row.businessInfo.credit_code),
        (this.collateralForm.registered_capital =
          row.businessInfo.registered_capital),
        (this.collateralForm.legal_person = row.businessInfo.legal_person),
        (this.collateralForm.idcard = row.businessInfo.idcard),
        (this.collateralForm.telephone = row.businessInfo.telephone);
    },
    handleDelete(index, row) {
      this.open(row);
    },
    getCollateral() {
      this.$axios
        .get("http://localhost:8800/collateral/get", {
          params: {
            collateral_num: this.queryparams.collateral_num,
            collateral_type: this.queryparams.collateral_type,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
          },
        })
        .then((resp) => {
          this.pageBean.beanList = resp.data.data;
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCollateral();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getCollateral();
    },
    getTypes() {
      this.$axios
        .get("http://localhost:8800/collateral/getTypes")
        .then((resp) => {
          this.collateralTypes = resp.data.data;
        });
    },
    open(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "http://localhost:8800/collateral/delete/" + row.collateral_num
            )
            .then((resp) => {
              this.getCollateral();
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
div.margin {
  margin-left: 120px;
  margin-bottom: 30px;
}
.span123 {
  margin-left: -1000px;
  font-size: 25px;
  color: #409eff;
  font-family: "Sofia";
  font-weight: bold;
}
.tile {
  color: white;
  background: rgba(7, 7, 233, 0.685);
  width: 160px;
  height: 35px;
}
</style>